<template>
  <div class="top-bar">
    <div class="top-left">
      <img src="../assets/images/yksg.svg" alt="一刻时光" />
      <span>一刻时光</span>
    </div>
    <div class="top-middle">
      <span
        @click="selectItem('0')"
        :class="isSelect === '0' ? 'middle-item' : ''"
        >留言墙</span
      >
      <span
        @click="selectItem('1')"
        :class="isSelect === '1' ? 'middle-item' : ''"
        >照片墙</span
      >
    </div>
    <div class="top-right">
      小王
      <span class="user"></span>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "TopBarView",
  setup(props, context) {
    let isSelect = ref("0");
    function selectItem(item) {
      isSelect.value = item;
      context.emit("selectedTab", item);
    }
    return {
      isSelect,
      selectItem,
    };
  },
};
</script>

<style lang="less" scoped>
.top-bar {
  height: 52px;
  width:100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  box-shadow: 0 0 4px 0 #0000001a;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  .top-left {
    display: flex;
    align-items: center;
    img {
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
  }
  .top-middle {
    display: flex;
    align-items: center;
    span {
      margin-right: 20px;
      cursor: pointer;
    }
    .middle-item {
      height: 36px;
      line-height: 36px;
      background: #3b73f0;
      display: inline-block;
      border-radius: 20px;
      padding: 0 20px;
      color: #fff;
    }
  }
  .top-right {
    color: #999;
    display: flex;
    align-items: center;
    .user {
      display: block;
      width: 36px;
      height: 36px;
      background-image: linear-gradient(180deg, #8cd8ff 0%, #2a6af0 100%);
      border-radius: 50%;
      margin-left: 15px;
    }
  }
}
</style>
